<!DOCTYPE html>
<html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <title>jingsi datav libs example</title>
    <script src="./js/vue2.js"></script>
<!--        <script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.prod.js"></script>-->
    <script src="../dist/jingsi.datav.js"></script>
    <style>
        html, body {
            overflow: hidden;
        }
        html, body, #app {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #222222;
            color: #fff;
        }
    </style>
</head>
<body>
<container id="app">
<!--    {{msg}}-->
<!--    <hello></hello>-->
<!--    <data-grid :columns="headers" :rows="rows" :useindex="false">-->
<!--        <template v-slot:0="slotScope">-->
<!--            {{slotScope.info.value}} &#45;&#45;-->
<!--        </template>-->
<!--&lt;!&ndash;        <template v-slot:1="slotScope">&ndash;&gt;-->
<!--&lt;!&ndash;            {{slotScope.info.value}} -&#45;&#45;&ndash;&gt;-->
<!--&lt;!&ndash;        </template>&ndash;&gt;-->
<!--    </data-grid>-->
<!--          <count-to :startVal="6" :endVal="123"></count-to>-->
<!--    <my-count-to :data="234"></my-count-to>-->
<!--    <h-select :data="selectData"></h-select>-->
<!--    <v-select :data="selectData"></v-select>-->
    <tab :headers="['1','2']">
        <template v-slot:0>
            1
        </template>
        <template v-slot:1>
            2
        </template>
    </tab>
</container>
<script>
    Vue.use(JingsiDataV)
    var vue = new Vue({
        el: '#app',
        data: {
            msg: 'hello',
            selectData:[
                {
                    name:'1',
                    value:1
                },
                {
                    name:'2',
                    value:2
                },
            ],
            headers: [
                {
                    name: 'field1',
                    field: 'field1',
                    style: {
                        width: '50%'
                    }
                },
                {
                    name: 'field2',
                    field: 'field2',
                    style: {
                        width: '50%'
                    }
                },
            ],
            rows: [
                {
                    field1: 'field1',
                    field2: 'field2',
                },
                {
                    field1: 'field1',
                    field2: 'field2',
                },
                {
                    field1: 'field1',
                    field2: 'field2',
                },
                {
                    field1: 'field1',
                    field2: 'field2',
                },
                {
                    field1: 'field1',
                    field2: 'field2',
                },
                {
                    field1: 'field1',
                    field2: 'field2',
                },
                {
                    field1: 'field1',
                    field2: 'field2',
                },
            ]
        }
    });


    // Vue.createApp({
    //     setup() {
    //         const data = {
    //             msg: 'hello',
    //             selectData:[
    //                 {
    //                     name:'1',
    //                     value:1
    //                 },
    //                 {
    //                     name:'2',
    //                     value:2
    //                 },
    //             ],
    //             headers: [
    //                 {
    //                     name: 'field1',
    //                     field: 'field1',
    //                     style: {
    //                         width: '50%'
    //                     }
    //                 },
    //                 {
    //                     name: 'field2',
    //                     field: 'field2',
    //                     style: {
    //                         width: '50%'
    //                     }
    //                 },
    //             ],
    //             rows: [
    //                 {
    //                     field1: 'field1',
    //                     field2: 'field2',
    //                 },
    //                 {
    //                     field1: 'field1',
    //                     field2: 'field2',
    //                 },
    //                 {
    //                     field1: 'field1',
    //                     field2: 'field2',
    //                 },
    //                 {
    //                     field1: 'field1',
    //                     field2: 'field2',
    //                 },
    //                 {
    //                     field1: 'field1',
    //                     field2: 'field2',
    //                 },
    //                 {
    //                     field1: 'field1',
    //                     field2: 'field2',
    //                 },
    //                 {
    //                     field1: 'field1',
    //                     field2: 'field2',
    //                 },
    //             ]
    //         };
    //         return {
    //             data
    //         }
    //     }
    // }).use(JingsiDataV).mount('#app')
</script>
</body>
</html>